<template>
  <div class="register-container">
    <div class="register-box">
      <img src="/src/assets/dreamtour的logo.png" alt="梦游纪 Logo" class="logo" />
      <el-card class="register-card">
        <h1>管理员注册</h1>
        <el-form @submit.native.prevent="handleRegister">
          <!-- 手机号 -->
          <el-form-item label="手机号" required>
            <el-input v-model="form.phone" placeholder="请输入手机号" autocomplete='off'></el-input>
          </el-form-item>

          <!-- 密码 -->
          <el-form-item label="密码" required>
            <el-input v-model="form.password" type="password" placeholder="请输入密码" autocomplete="new-password"></el-input>
            <span class="password-rule">密码长度不能少于6个字符</span>
          </el-form-item>

          <!-- 提交按钮 -->
          <div style="display: flex; justify-content:center;">
            <el-form-item>
              <el-button type="primary" native-type="submit">注册</el-button>
              <el-button @click="goToLogin">返回登录</el-button>
            </el-form-item>
          </div>
          
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

// 表单数据
const form = ref({
  phone: '',
  password: ''
});

// 手机号验证
const validatePhone = (phone: string): boolean => {
  const phoneRegex = /^[0-9]{11}$/;  // 纯数字并且长度为11
  return phoneRegex.test(phone);
};

// 密码验证
const validatePassword = (password: string): boolean => {
  return password.length >= 6;  // 密码长度不能少于6个字符
};

// 注册功能
const handleRegister = async () => {
  // 手机号验证
  if (!validatePhone(form.value.phone)) {
    ElMessage.error('请输入有效的手机号，必须是11位纯数字');
    return;
  }

  // 密码验证
  if (!validatePassword(form.value.password)) {
    ElMessage.error('密码长度不能少于6个字符');
    return;
  }

  // 如果验证通过，则执行注册
  try {
    const response = await axios.post('http://localhost:8088/administrators/register', {
      adminPhone: form.value.phone,
      adminPwd: form.value.password,
      authorityLevel: '4'  // 默认设置权限为 4
    });

    console.log('后端响应数据:', response.data);  // 打印响应数据

    // 后端返回信息处理
    if (response.data.message === '注册成功') {
      ElMessage.success('注册成功');
      router.push('/login');  // 注册成功后跳转到登录页
    } else if (response.data.message === '该手机号已被注册') {
      ElMessage.error('该手机号已被注册');  // 提示手机号已被注册
    } else {
      ElMessage.error(response.data.message);  // 其他错误信息
    }
  } catch (error) {
    console.error('注册失败:', error);
    ElMessage.error('注册失败，请稍后再试。');
  }
};

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login');
};

// 清空输入框内容，确保在页面加载时不受自动填充影响
nextTick(() => {
  form.value.phone = '';
  form.value.password = '';
});
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #C4D7D6;
}

.register-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.register-card {
  width: 400px;
  padding: 20px;
}


.logo {
  width: 300px; /* 设置 logo 的宽度 */
  height: auto; /* 保持 logo 的宽高比 */
  margin-bottom: 20px; /* logo 与 card 之间的间距 */
}

.password-rule {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
</style>
